<div class="main-content">
    <div class="section-content section-content-p30">
        <div class="container-fluid">
            <h3>Your Orders</h3>

            <div *ngIf="orderHistoryList.length > 0">
                <table class="table table-bordered">
                    <tr>
                        <th width="20%">Order Tracking Number</th>
                        <th width="10%">Total Price</th>
                        <th width="10%">Total Quantity</th>
                        <th width="10%">Date</th>
                    </tr>
                    <tr *ngFor="let tempOrderHistory of orderHistoryList">
                        <td>
                            {{ tempOrderHistory.orderTrackingNumber }}
                        </td>
                        <td>
                            {{ tempOrderHistory.totalPrice }}
                        </td>
                        <td>
                            {{ tempOrderHistory.totalQuantity }}
                        </td>
                        <td>
                            {{ tempOrderHistory.dateCreated | date: 'medium' }}
                        </td>
                    </tr>
                </table>
            </div>

            <!-- if order history is empty then display a message -->
            <div *ngIf="orderHistoryList.length == 0" class="alert alert-warning col-md-12" role="alert">
                No orders found.
            </div>
        </div>
    </div>
</div>
